<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta name="Author" content="benben" />
	<meta name="Description" content="Produces by JWI (http://www.51jsr.com)" />
	<meta name="keywords" content="JavaScript Framework,webUI,js,function,HTML,CSS,脚本" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Jsr内核的封装演示 jsRookie - JavaScript UI module package</title>
	<link rel="shortcut icon" href="/favicon.ico" />
	<link href="../resources/example.css" type="text/css" rel="stylesheet" />
	<script type="text/javascript" src="../jsr/jsr.core.js?loading=Test&skin=default&lang=zh-cn">
		ui.panel.tabPanel
		con.set.cffage
		ss$abc.util
	</script>
</head>

<body>
<div id="bodyWrap" class="font">
	<b class="demoCaption">Jsr内核的封装演示</b><hr/><br/>
	1. 浏览器测试信息
	<pre id="browserInfo" style="line-height:22px"></pre>
	<script>
		document.getElementById("browserInfo").innerHTML = Jsr
			.format("Internet Explorer：$[IE]<br/>FirFox：$[FF]<br/>Chrome|Safari：$[SA]<br/>Opera：$[OP]<br/>当前版本：$[BV]<br/>页面是否使用了DTD文档类型定义：$[DTD]", Jsr);
	</script>
	2. jsRookie组件包的版本：<span class="blue"><script>document.writeln(Jsr.ver)</script></span>
	<br/><br/>
	<table class="runWrap">
		<tr><td>
			jsRookie组件包的系统路径： <span class="blue"><script>document.writeln(Jsr.appPath)</script></span>
		</td><td colspan="2">
			组件包Skin路径： <span class="blue"><script>document.writeln(Jsr.skinPath)</script></span>
		</td></tr>
		<tr><td colspan="2">
			查看Head标签里已加载的内容
		</td><td>
			<input type="button" value="查看内容" onclick="alert(Jsr.Head.innerHTML);"/>
		</td></tr>
		<tr><td colspan="2">
			查看当前浏览器的页面可视尺寸
		</td><td>
			<input type="button" value="查看尺寸" onclick="var s = Jsr.getViewportSize();alert(s.width + ' × ' + s.height);"/>
		</td></tr>
		<tr><td width="400px">
			a) 执行 <b class="blue">Jsr.isNumber(1024);</b>
		</td><td width="300px">
			结果：<b class="red">true</b>
		</td><td width="81px">
			<input type="button" value="查看结果" onclick="alert(Jsr.isNumber(1024));"/>
		</td></tr>
		<tr><td>
			b) 执行 <b class="blue">Jsr.isString("jsRookie");</b>
		</td><td>
			结果：<b class="red">true</b>
		</td><td>
			<input type="button" value="查看结果" onclick="alert(Jsr.isString('jsRookie'));"/>
		</td></tr>
		<tr><td>
			c) 执行 <b class="blue">Jsr.isFunction(function(){});</b>
		</td><td>
			结果：<b class="red">true</b>
		</td><td>
			<input type="button" value="查看结果" onclick="alert(Jsr.isFunction(function(){}));"/>
		</td></tr>
		<tr><td>
			d) 执行 <b class="blue">Jsr.isArray({});</b>
		</td><td>
			结果：<b class="red">false</b>
		</td><td>
			<input type="button" value="查看结果" onclick="alert(Jsr.isArray({}));"/>
		</td></tr>
		<tr><td>
			e) 执行 <b class="blue">Jsr.isDate(new Date);</b>
		</td><td>
			结果：<b class="red">true</b>
		</td><td>
			<input type="button" value="查看结果" onclick="alert(Jsr.isDate(new Date));"/>
		</td></tr>
		<tr><td>
			f) 执行 <b class="blue">Jsr.mkZero(68, 1000);</b>
		</td><td>
			结果：<b class="red">0068</b>
		</td><td>
			<input type="button" value="查看结果" onclick="alert(Jsr.mkZero(68, 1000));"/>
		</td></tr>
		<tr><td>
			g) 执行 <b class="blue">Jsr.getTagId();</b>
		</td><td>
			结果：<span class="red">显示唯一的ID，一般用于设置 Dom 的ID</span>
		</td><td>
			<input type="button" value="查看结果" onclick="alert(Jsr.getTagId());"/>
		</td></tr>
		<tr><td>
			h) 执行 <b class="blue">Jsr.getUuid();</b>
		</td><td>
			结果：<span class="red">显示一个唯一的UUID</span>
		</td><td>
			<input type="button" value="查看结果" onclick="alert(Jsr.getUuid());"/>
		</td></tr>
		<tr><td>
			i) 执行 <b class="blue">Jsr.open("http://www.51jsr.com");</b>
		</td><td>
			结果：<span class="red">在新窗口中打开jsRookie的官方网站</span>
		</td><td>
			<input type="button" value="查看结果" onclick="Jsr.open('http://www.51jsr.com');"/>
		</td></tr>
		<tr><td colspan="2">
			<b>将浏览器的URL更改为带参量的测试URL地址。</b>
		</td><td>
			<input type="button" value="更改地址" onclick="updateUrl();"/>
		</td></tr>
		<tr><td>
			j) 执行 <b class="blue">Jsr.getParameter(参量名);</b>&nbsp;&nbsp;
			来取参量的第一个值
		</td><td>
			请输入参量名：
			<input type="text" id="paraName" style="color:#000;width:130px;height:16px;background:#fff;line-height:16px;"/>
		</td><td>
			<input type="button" value="查看结果" onclick="alert(Jsr.getParameter(paraName.value));paraName.value = '';"/>
		</td></tr>
		<tr><td>
			k) 执行 <b class="blue">Jsr.getParameters(参量名);</b>&nbsp;&nbsp;
			来取参量的所有值
		</td><td>
			请输入参量名：
			<input type="text" id="paraNames" style="color:#000;width:130px;height:16px;background:#fff;line-height:16px;"/>
		</td><td>
			<input type="button" value="查看结果" onclick="alert(Jsr.getParameters(paraNames.value));paraNames.value = '';"/>
		</td></tr>
	</table><br/>
	3. 关于对象的继承与扩展
<pre>
var a = function() {
	var i = 0;
	this.a = "aa";
	this.show = function() {
		alert(i++);
	}
},
b = function() {
	this.b = "bb";
},
c = {c:"c", d:function(){return "dddddddddddd"; }, a:"CCC"}
,
A = function() {
	Jsr.calls(this, a, b);	//扩展A类的方法和属性
	this.a = "aaaaa";
	this.x = "xxxxx";
};

Jsr.extend(A, c);			//让A类继承c

var jsRookie = new A;
</pre>
	<table class="runWrap">
		<tr><td width="400px">
			a) 执行 <b class="blue">alert(jsRookie.b);</b>
		</td><td width="300px">
			结果：<b class="red">bb</b>
		</td><td width="81px">
			<input type="button" value="查看结果" onclick="alert(jsRookie.b);"/>
		</td></tr>
		<tr><td>
			b) 执行 <b class="blue">alert(jsRookie.x);</b>
		</td><td>
			结果：<b class="red">xxxxx</b>
		</td><td>
			<input type="button" value="查看结果" onclick="alert(jsRookie.x);"/>
		</td></tr>
		<tr><td>
			c) 执行 <b class="blue">alert(jsRookie.c);</b>
		</td><td>
			结果：<b class="red">c</b>
		</td><td>
			<input type="button" value="查看结果" onclick="alert(jsRookie.c);"/>
		</td></tr>
		<tr><td>
			d) 执行 <b class="blue">alert(jsRookie.d());</b>
		</td><td>
			结果：<b class="red">dddddddddddd</b>
		</td><td>
			<input type="button" value="查看结果" onclick="alert(jsRookie.d());"/>
		</td></tr>
		<tr><td>
			e) 执行 <b class="blue">alert(jsRookie.a);</b>
		</td><td>
			结果：<b class="red">aaaaa</b>
		</td><td>
			<input type="button" value="查看结果" onclick="alert(jsRookie.a);"/>
		</td></tr>
		<tr><td>
			f) 执行 <b class="blue">jsRookie.show();</b>
		</td><td>
			结果：<span class="red">显示递增数，步长为1</span>
		</td><td>
			<input type="button" value="查看结果" onclick="jsRookie.show();"/>
		</td></tr>
	</table>
	<br/><br/>
	<input type="button" value="清理内存" onclick="setTimeout(CollectGarbage, 10);"/>
	<br/><br/>
	&copy 2008-2011 51jsr.com
</div>
</body>
<script>
var paraName = document.getElementById("paraName"), paraNames = document.getElementById("paraNames");

//onReady测试
Jsr.onReady(function(){
	alert("The page loads completes !");
});
//继承与扩展演示
var a = function() {
	var i = 0;
	this.a = "aa";
	this.show = function() {
		alert(i++);
	}
},
b = function() {
	this.b = "bb";
},
c = {c:"c", d:function(){return "dddddddddddd"; }, a:"CCC"}
,
A = function() {
	Jsr.calls(this, a, b);	//扩展A类的方法和属性
	this.a = "aaaaa";
	this.x = "xxxxx";
};

Jsr.extend(A, c);			//让A类继承c

var jsRookie = new A;


//更改为带参量的测试URL地址
function updateUrl() {
	window.location = window.location.href.split("?")[0] + "?app=jsRookie&ver=3.0.0.100421&arg=~!%40%23%22%24%25%5E%26*()&author=benben&info=web%E5%89%8D%E7%AB%AF%E7%BB%84%E4%BB%B6%E5%8C%85&arg=1024&author=hemagirl&arg=jsr";
}
</script>
</html> 